<template>
  <div>
    <router-view></router-view>
    <TabBar v-show="isTabbarShow"></TabBar>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { computed, onMounted, ref, watch } from "vue";
import TabBar from "./components/TabBar.vue";
import useTabbarStore from "./store/setupStore/tabbarStore";

// 需要注意的是useTabbarStore是一个方法，而且返回的是一个reactive对象。如果你想用的更方便，可以调用pinia官方提供的storeToRefs这个api，配合上解构赋值把store中的数据变成可以直接使用的。不过其实直接store.xxx去获取其实也没麻烦多少，看你个人喜好把
const tabbarStore = useTabbarStore();

const { isTabbarShow } = storeToRefs(tabbarStore);
</script>


<style scoped>
</style>

<style>
* {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  padding: 25vw 0;
}

h4 {
  font-size: 4vw;
  padding-top: 12vw;
}
</style>
